<template>
	<div>
		<el-card shadow="never">
			<div style="text-align: left;">
				<el-select class="x_soso" filterable v-model="search.partType" placeholder="按部位名称搜索">
					<el-option v-for="(item, index) in bodys" :key="index" :label="item.partTypeName" :value="item.partType"></el-option>
				</el-select>
				<el-button type="primary" @click="searchList">查询</el-button>
			</div>
			<div style="text-align: left;">
				<el-button type="primary" @click="reloadVal">刷新</el-button>
				<el-button type="primary" @click="addColumnClick">
					<i class="el-icon-plus"></i>
					新增素材
				</el-button>
			</div>
			<div style="clear:both"></div>
			<el-table v-loading="loading" :data="tableData" style="width: 100%;margin-top: 20px">
				<el-table-column type="index" width="50"></el-table-column>
				<el-table-column label="详细部位" align="center" width="150" prop="partTypeName"></el-table-column>
				<el-table-column label="部位图" align="center" width="150" prop="fileTypeImg">
					<template slot-scope="scope">
						<img :src="scope.row.fileTypeImg" min-width="70" height="70" />
					</template>
				</el-table-column>
				<el-table-column label="操作图" align="center" width="150" prop="fileTypeDetailImg ">
					<template slot-scope="scope">
						<img :src="scope.row.fileTypeDetailImg" min-width="70" height="70" />
					</template>
				</el-table-column>
				<el-table-column label="音频" align="center" width="200" prop="fileTypeMp3"></el-table-column>
				<el-table-column label="视频" align="center" width="150" prop="fileTypeMp4">
					<template slot-scope="scope">
						<video :src="scope.row.fileTypeMp4" min-width="70" height="70" />
					</template>
				</el-table-column>
				<el-table-column label="创建时间" align="center"  prop="createTime"></el-table-column>
				<el-table-column fixed="right" label="操作" align="center" width="250">
					<template slot-scope="scope">
						<el-button @click="cellClick(scope.row)" icon="el-icon-edit" type="warning" size="small">编辑</el-button>
						<el-button @click="deleateData(scope.row)" icon="el-icon-edit" type="warning" size="small">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div style="margin-top: 20px;text-align: right">
				<el-pagination
					background
					@current-change="columnFind"
					:current-page="page.page"
					:page-size="page.pagesize"
					layout="prev, pager, next, jumper, total"
					:total="page.count"
				></el-pagination>
			</div>
		</el-card>
		<el-dialog :title="cname" :visible.sync="dialogVisible" width="1000px" :close-on-click-modal="false">
			<el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
				<el-form-item label="部位选择" prop="name">
					<el-select filterable v-model="partType" style="width: 100%;" placeholder="选择详细部位">
						<el-option v-for="(item, index) in bodys" :key="index" :label="item.partTypeName" :value="item.partType"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="部位图" class="dislog_item" style="width: 52%;float: left;">
					<el-upload
						class="avatar-uploader"
						action="https://test.beauty-iot.com/appt/api/common/uploadImage"
						:show-file-list="false"
						:on-success="handleAvatarSuccess"
						:before-upload="beforeAvatarUpload"
					>
						<img v-if="imageUrl" :src="imageUrl" class="avatar" />
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
					<img src="../../../assets/img/partimg.png" style="width: 306px;height: 189px;position: absolute;left: 400px;top: 0;"/>
				</el-form-item>
				<el-form-item label="部位操作图" prop="name" style="width: 52%;float: left;">
					<el-upload
						class="avatar-uploader"
						action="https://test.beauty-iot.com/appt/api/common/uploadImage"
						:show-file-list="false"
						:on-success="handleAvatarSuccess1"
						:before-upload="beforeAvatarUpload1"
					>
						<img v-if="imageUrlZuo" :src="imageUrlZuo" class="avatar" />
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
					<img src="../../../assets/img/operationimg.png" style="width: 306px;height: 190px;position: absolute;left: 400px;top: 0;"/>
				</el-form-item>
				<el-form-item label="部位操作视频" prop="Video" style="width: 52%;float: left;">
					<!-- action必选参数, 上传的地址 -->
					<el-upload
						class="avatar-uploader el-upload--text"
						action="https://test.beauty-iot.com/appt/api/common/uploadImage"
						:show-file-list="false"
						:on-success="handleVideoSuccess"
						:before-upload="beforeUploadVideo"
						:on-progress="uploadVideoProcess"
					>
						<video v-if="Video != '' && videoFlag == false" :src="Video" class="avatar" controls="controls">您的浏览器不支持视频播放</video>
						<i v-else-if="Video == '' && videoFlag == false" class="el-icon-plus avatar-uploader-icon"></i>
						<el-progress v-if="videoFlag == true" type="circle" :percentage="videoUploadPercent" style="margin-top:30px;"></el-progress>
					</el-upload>
					<P class="text">请保证视频格式正确，且不超过10M</P>
					<img src="../../../assets/img/videoimg.png" style="width: 306px;height: 218px;position: absolute;left: 400px;top: 0;"/>
				</el-form-item>
				<el-form-item label="部位操作音频" prop="name" style="width: 52%;float: left;">
					<el-upload
						id="audioUpload"
						class="avatar-uploader"
						action="https://test.beauty-iot.com/appt/api/common/uploadImage"
						:show-file-list="true"
						:multiple="false"
						:file-list="fileList"
						:limit="1"
						:auto-upload="true"
						:on-success="handleAvatarSuccess2"
						:before-upload="beforeAvatarUpload2"
					>
						<audio :src="mp3Url" class="avatar" controls="controls"></audio>
						<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
						<div slot="tip" class="el-upload__tip" style="margin-bottom: 10px">只能上传mp3文件，且不超过2M，播放长度不超过60s</div>
					</el-upload>
				</el-form-item>
			</el-form>
			<div style="clear: both;"></div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="submitForm()">保存</el-button>
			</span>
		</el-dialog>
		<el-dialog :title="cname" :visible.sync="dialogEdit" width="1000px" :close-on-click-modal="false">
			<el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
				<el-form-item label="部位选择" prop="name">
					<el-select filterable v-model="partTypeNameData" disabled style="width: 100%;" placeholder="选择详细部位">
						<el-option v-for="(item, index) in bodys" :key="index" :label="item.partTypeName" :value="item.partType"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="部位图" class="dislog_item" style="width: 52%;float: left;">
					<el-upload
						class="avatar-uploader"
						action="https://test.beauty-iot.com/appt/api/common/uploadImage"
						:show-file-list="false"
						:on-success="handleAvatarSuccessE"
						:before-upload="beforeAvatarUploadE"
					>
						<img v-if="fileTypeImg" :src="fileTypeImg" class="avatar" />
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</el-form-item>
				<el-form-item label="部位操作图" prop="name" style="width: 52%;float: left;">
					<el-upload
						class="avatar-uploader"
						action="https://test.beauty-iot.com/appt/api/common/uploadImage"
						:show-file-list="false"
						:on-success="handleAvatarSuccess1E"
						:before-upload="beforeAvatarUpload1E"
					>
						<img v-if="fileTypeDetailImg" :src="fileTypeDetailImg" class="avatar" />
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</el-form-item>
				<el-form-item label="部位操作视频" prop="Video" style="width:52%;float: left;">
					<!-- action必选参数, 上传的地址 -->
					<el-upload
						class="avatar-uploader el-upload--text"
						action="https://test.beauty-iot.com/appt/api/common/uploadImage"
						:show-file-list="false"
						:on-success="handleVideoSuccess1"
						:before-upload="beforeUploadVideo1"
						:on-progress="uploadVideoProcess1"
					>
						<video v-if="fileTypeMp4 != '' && videoFlag == false" :src="fileTypeMp4" class="avatar" controls="controls">您的浏览器不支持视频播放</video>
						<i v-else-if="fileTypeMp4 == '' && videoFlag == false" class="el-icon-plus avatar-uploader-icon"></i>
						<el-progress v-if="videoFlag == true" type="circle" :percentage="videoUploadPercent" style="margin-top:30px;"></el-progress>
					</el-upload>
					<P class="text">请保证视频格式正确，且不超过10M</P>
				</el-form-item>
				<el-form-item label="部位操作音频" prop="name" style="width: 52%;float: left;">
					<el-upload
						id="audioUpload"
						class="avatar-uploader"
						action="https://test.beauty-iot.com/appt/api/common/uploadImage"
						:show-file-list="true"
						:multiple="false"
						:file-list="fileList"
						:limit="1"
						:auto-upload="true"
						:on-success="handleAvatarSuccess2E"
						:before-upload="beforeAvatarUpload2E"
					>
						<audio :src="fileTypeMp3" class="avatar" controls="controls"></audio>
						<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
						<div slot="tip" class="el-upload__tip" style="margin-bottom: 10px">只能上传mp3文件，且不超过2M，播放长度不超过60s</div>
					</el-upload>
				</el-form-item>
			</el-form>
			<div style="clear: both;"></div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogEdit = false">取 消</el-button>
				<el-button type="primary" @click="submitForm2()">保存</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import Cookie from 'js-cookie';
import { materialList, addManagerMaterial, bodysList, editDataMaterial, delDataMaterial, editorMaterial } from '../../../server/index';
export default {
	inject: ['reload'],
	data() {
		return {
			//查询
			search: {},
			partType: '',
			bodys: [],
			editData: [],
			ruleForm: {},
			/* 上传 */
			imageUrl: '',
			imageUrlZuo: '',
			partTypeNameData: '',
			fileTypeImg: '',
			fileTypeDetailImg: '',
			fileTypeMp4: '',
			fileTypeMp3: '',
			mp3Url: '',
			fileList: [],
			videoFlag: false,
			//是否显示进度条
			videoUploadPercent: '',
			//进度条的进度，
			isShowUploadVideo: false,
			//显示上传按钮
			Video: '',
			/* 上传 */
			loading: true,
			tableData: [],
			cname: '添加组织机构',
			flmc: '',
			page: {
				count: 0,
				pagesize: 10,
				page: 1
			},
			dialogVisible: false,
			dialogEdit: false
		};
	},
	mounted() {
		var page = 1;
		this.columnFind(page);
		this.bodysData();
		Cookie.remove('tabList');
	},
	methods: {
		// 刷新方法
		reloadVal() {
			this.reload();
		},
		// 查询、
		searchList() {
			const _this = this;
			_this.columnFind(1);
		},
		/* 上传图片 */
		//添加 === 部位图
		handleAvatarSuccess(res, file) {
			// console.log(file);
			this.imageUrl = file.response.data.imgUrl;
		},
		beforeAvatarUpload(file) {
			const isLt2M = file.size / 1024 / 1024 < 2;
			if (!isLt2M) {
				this.$message.error('上传图片大小不能超过 2MB!');
			}
			return isLt2M;
		},
		// 编辑 === 部位图
		handleAvatarSuccessE(res, file) {
			this.fileTypeImg = file.response.data.imgUrl;
		},
		beforeAvatarUploadE(file) {
			const isLt2M = file.size / 1024 / 1024 < 2;
			if (!isLt2M) {
				this.$message.error('上传图片大小不能超过 2MB!');
			}
			return isLt2M;
		},
		// 添加 === 部位操作图
		handleAvatarSuccess1(res, file) {
			this.imageUrlZuo = file.response.data.imgUrl;
		},
		beforeAvatarUpload1(file) {
			const isLt2M = file.size / 1024 / 1024 < 2;
			if (!isLt2M) {
				this.$message.error('上传图片大小不能超过 2MB!');
			}
			return isLt2M;
		},
		// 编辑 === 部位操作图
		handleAvatarSuccess1E(res, file) {
			this.fileTypeDetailImg = file.response.data.imgUrl;
		},
		beforeAvatarUpload1E(file) {
			const isLt2M = file.size / 1024 / 1024 < 2;
			if (!isLt2M) {
				this.$message.error('上传图片大小不能超过 2MB!');
			}
			return isLt2M;
		},

		// end 上传图片
		//视频 === 添加
		beforeUploadVideo(file) {
			const isLt10M = file.size / 1024 / 1024 < 10;
			if (['video/mp4', 'video/ogg', 'video/flv', 'video/avi', 'video/wmv', 'video/rmvb'].indexOf(file.type) == -1) {
				this.$message.error('请上传正确的视频格式');
				return false;
			}
			if (!isLt10M) {
				this.$message.error('上传视频大小不能超过10MB哦!');
				return false;
			}
		},
		uploadVideoProcess(event, file, fileList) {
			this.videoFlag = true;
			this.videoUploadPercent = Number(file.percentage.toFixed(0));
		},
		handleVideoSuccess(res, file) {
			//获取上传图片地址
			this.videoFlag = false;
			this.videoUploadPercent = 0;
			this.Video = file.response.data.imgUrl;
		},
		// 视频 === 编辑
		beforeUploadVideo1(file) {
			const isLt10M = file.size / 1024 / 1024 < 10;
			if (['video/mp4', 'video/ogg', 'video/flv', 'video/avi', 'video/wmv', 'video/rmvb'].indexOf(file.type) == -1) {
				this.$message.error('请上传正确的视频格式');
				return false;
			}
			if (!isLt10M) {
				this.$message.error('上传视频大小不能超过10MB哦!');
				return false;
			}
		},
		uploadVideoProcess1(event, file, fileList) {
			this.videoFlag = true;
			this.videoUploadPercent = Number(file.percentage.toFixed(0));
		},
		handleVideoSuccess1(res, file) {
			//获取上传图片地址
			this.videoFlag = false;
			this.videoUploadPercent = 0;
			this.fileTypeMp4 = file.response.data.imgUrl;
		},
		// 音频 === 添加
		handleAvatarSuccess2(res, file) {
			// this.mp3Url = URL.createObjectURL(file.raw);
			this.mp3Url = file.response.data.imgUrl;
		},
		beforeAvatarUpload2(file) {
			// 文件类型进行判断
			/* const isAudio = file.type === 'audio/mp3' || file.type === 'audio/mpeg'; */
			// 限制上传文件大小 2M
			/* const isLt2M = file.size / 1024 / 1024 < 2;
				const isTime60S = this.audioDuration >= 60 ? true : ''; */
			// 获取时长
			this.getTimes(file);
			// if (!isAudio) {
			// 	this.$message.error('上传文件只能是Mp3格式!');
			// 	this.fileList = [];
			// } else {
			// 	if (!isLt2M) {
			// 		this.$message.error('上传文件大小不能超过 2MB!');
			// 		this.fileList = [];
			// 	} else {
			// 		if (!isTime60S) {
			// 			this.$message.error('上传文件时长不能超过60秒!');
			// 			this.fileList = [];
			// 		}
			// 	}
			// }
			// return isAudio && isLt2M && isTime60S;
		},
		// 音频 === 编辑
		handleAvatarSuccess2E(res, file) {
			this.fileTypeMp3 = file.response.data.imgUrl;
		},
		beforeAvatarUpload2E(file) {
			// 文件类型进行判断
			/* const isAudio = file.type === 'audio/mp3' || file.type === 'audio/mpeg'; */
			// 限制上传文件大小 2M
			/* const isLt2M = file.size / 1024 / 1024 < 2;
				const isTime60S = this.audioDuration >= 60 ? true : ''; */
			// 获取时长
			this.getTimes(file);
			// if (!isAudio) {
			// 	this.$message.error('上传文件只能是Mp3格式!');
			// 	this.fileList = [];
			// } else {
			// 	if (!isLt2M) {
			// 		this.$message.error('上传文件大小不能超过 2MB!');
			// 		this.fileList = [];
			// 	} else {
			// 		if (!isTime60S) {
			// 			this.$message.error('上传文件时长不能超过60秒!');
			// 			this.fileList = [];
			// 		}
			// 	}
			// }
			// return isAudio && isLt2M && isTime60S;
		},
		getTimes(file) {
			var content = file;
			//获取录音时长
			var url = URL.createObjectURL(content);
			//经测试，发现audio也可获取视频的时长
			var audioElement = new Audio(url);
			audioElement.addEventListener('loadedmetadata', _event => {
				this.audioDuration = parseInt(audioElement.duration);
			});
		},
		/* 上传 */
		bodysData() {
			const _this = this;
			this.http.request({
				url: bodysList,
				data: '',
				method: 'GET',
				success: function(res) {
					_this.bodys = res;
				}
			});
		},
		columnFind(page) {
			const _this = this;
			_this.page.page = page;
			let dataMsg = {
				page: _this.page.page,
				rows: _this.page.pagesize,
				partType: undefined == _this.search.partType ? '' : _this.search.partType
			};
			_this.http.request({
				url: materialList,
				data: dataMsg,
				success: function(res) {
					_this.loading = false;
					_this.tableData = res.list;
					_this.page.count = res.total;
				},
				error: function(err) {
					_this.$message({
						offset: '200',
						message: err.msg
					});
				}
			});
		},
		// 保存新增
		submitForm() {
			const _this = this;
			if (!_this.partType) {
				_this.$message({
					offset: '500',
					message: '详细部位选择不能为空'
				});
				return;
			}
			if (!_this.imageUrl) {
				_this.$message({
					offset: '200',
					message: '请输入部位图'
				});
				return;
			}
			if (!_this.imageUrlZuo) {
				_this.$message({
					offset: '200',
					message: '请选择部位操作图'
				});
				return;
			}
			if (!_this.Video) {
				_this.$message({
					offset: '200px',
					message: '请输入正确的部位操作视频'
				});
				return;
			}
			if (!_this.mp3Url) {
				_this.$message({
					offset: '200',
					message: '请输入正确的部位操作音频'
				});
				return;
			}
			let dataMsg = {
				partType: _this.partType,
				fileTypeImg: _this.imageUrl,
				fileTypeDetailImg: _this.imageUrlZuo,
				fileTypeMp3: _this.mp3Url,
				fileTypeMp4: _this.Video
			};
			_this.http.request({
				url: addManagerMaterial,
				data: dataMsg,
				success: function() {
					_this.dialogVisible = false;
					_this.reload();
				},
				error: function(res) {
					_this.$message({
						message: res.msg,
						offset: 350
					});
				}
			});
		},
		addColumnClick() {
			this.dialogVisible = true;
			this.cname = '新增素材';
		},
		cellClick(res) {
			const _this = this;
			_this.cname = '编辑素材';
			_this.dialogEdit = true;
			let dataMsg = {
				partType: res.partType
			};
			_this.http.request({
				url: editDataMaterial,
				data: dataMsg,
				success: function(res) {
					_this.partTypeNameData = res.partType;
					_this.fileTypeImg = res.fileTypeImg;
					_this.fileTypeDetailImg = res.fileTypeDetailImg;
					_this.fileTypeMp4 = res.fileTypeMp4;
					_this.fileTypeMp3 = res.fileTypeMp3;
				},
				error: function(err) {
					_this.$message({
						offset: '200',
						message: err.msg
					});
				}
			});
		},
		// 删除
		deleateData(res) {
			const _this = this;
			_this
				.$confirm('该操作将删除此条数据, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消'
				})
				.then(() => {
					_this.http.request({
						url: delDataMaterial,
						data: {
							partType: res.partType
						},
						success: function() {
							_this.$message({
								offset: '200',
								message: '该条数据已删除'
							});
							_this.reload();
						},
						error: function(err) {
							_this.$message({
								offset: '200',
								message: err.msg
							});
						}
					});
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消'
					});
				});
		},
		// 保存编辑
		submitForm2() {
			const _this = this;
			let dataMsg = {
				partType: _this.partTypeNameData,
				fileTypeImg: _this.fileTypeImg,
				fileTypeDetailImg: _this.fileTypeDetailImg,
				fileTypeMp3: _this.fileTypeMp3,
				fileTypeMp4: _this.fileTypeMp4
			};
			_this.http.request({
				url: editorMaterial,
				data: dataMsg,
				success: function() {
					_this.dialogEdit = false;
					_this.reload();
				},
				error: function(err) {
					_this.$message({
						message: err.msg,
						offset: 350
					});
				}
			});
		}
	}
};
</script>

<style scoped="scoped" lang="less">
.el-button--primary {
	background: rgba(113, 106, 202, 1);
	border: none;
}

.el-button--primary:hover {
	color: #606266;
	background: rgba(255, 255, 255, 1);
	border: 1px solid rgba(113, 106, 202, 1);
}
.avatar-uploader-icon {
	border: 1px dashed #d9d9d9;
}
.el-button--warning {
	color: #fff;
	background-color: #f4516c;
	border-color: #f4516c;
}
.avatar-uploader .el-upload {
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}

.avatar-uploader .el-upload:hover {
	border-color: #409eff;
}

.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
	line-height: 178px;
	text-align: center;
}

.avatar {
	width: 178px;
	height: 178px;
	display: block;
}

.wrap_box {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
}
</style>
